import React, { Component } from 'react';
import {
  Button,
  Modal,
  Select,
  Form,
  Row,
  Col,
  Input,
  Radio,
  Table,
  DatePicker,
  notification,
  Divider,
  Tabs,
  InputNumber,
} from 'antd';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';
import request from 'umi-request';
import style from '../index.css';
import moment from 'moment';

const { TabPane } = Tabs;
@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      form: {},

      isopen: false,
      hasIBDYear: '',
      hasIBDMouth: '',
      content: {}, // 用来存储数据结构保证提交时不会出现 null值
      colorectalCancerContent: {}, // 用来存储数据结构保证提交时不会出现 null值
      familialHistory: [{}, {}, {}],
      maritalStatusData: [
        { label: '未婚', value: '1' },
        { label: '已婚', value: '2' },
        { label: '离异', value: '3' },
        { label: '丧偶', value: '4' },
      ],
      degreeEducationData: [
        { label: '未上过学', value: '1' },
        { label: '小学', value: '2' },
        { label: '初中', value: '3' },
        { label: '高中', value: '4' },
        { label: '大专及以上', value: '5' },
      ],
      headwatersData: [
        { label: '地窖水、池塘水、浅井水', value: '1' },
        { label: '湖水、河水', value: '2' },
        { label: '深井水、泉水', value: '3' },
        { label: '纯净水/自来水(经处理)', value: '4' },
      ],
      drinkData: [
        { label: '不喝', value: '1' },
        { label: '偶尔喝', value: '2' },
        { label: '经常喝', value: '3' },
      ],
      systolicPressureData: [
        { label: '120mmHg以下', value: '1' },
        { label: '120mmHg ~ 139mmHg', value: '2' },
        { label: '140mmHg ~ 179mmHg', value: '3' },
        { label: '180mmHg以上', value: '4' },
      ],
      diastolicPressureData: [
        { label: '80mmHg以下', value: '1' },
        { label: '80mmHg ~ 89mmHg', value: '2' },
        { label: '90mmHg ~ 109mmHg', value: '3' },
        { label: '110mmHg以上', value: '4' },
      ],
      drinkQuantityData: [
        { label: '<2两', value: '1' },
        { label: '2 ~ 5两', value: '2' },
        { label: '6 ~ 10两', value: '3' },
        { label: '>10两', value: '4' },
      ],
      drinkFrequencyData: [
        { label: '一周2 ~ 3次', value: '1' },
        { label: '一周4 ~ 6次', value: '2' },
        { label: '一周6次以上', value: '3' },
      ],
      blackTeaYearData: [
        { label: '<1年', value: '1' },
        { label: '1 ~ 5年', value: '2' },
        { label: '6 ~ 10年', value: '3' },
        { label: '>10年', value: '4' },
      ],
      greenTeaYearData: [
        { label: '<1年', value: '1' },
        { label: '1 ~ 5年', value: '2' },
        { label: '6 ~ 10年', value: '3' },
        { label: '>10年', value: '4' },
      ],
      foodData: [
        { label: '从不', value: '1' },
        { label: '很少(<2次/周)', value: '2' },
        { label: '经常(>=2次/周)', value: '3' },
      ],
      whether: [
        { label: '否', value: '1' },
        { label: '是', value: '2' },
        { label: '不清楚', value: '3' },
      ],
      loseToothData: [
        { label: '1颗', value: '1' },
        { label: '2 ~ 4颗', value: '2' },
        { label: '3 ~ 5颗', value: '3' },
        { label: '5颗以上', value: '4' },
      ],
      plantToothData: [
        { label: '无', value: '1' },
        { label: '1颗', value: '2' },
        { label: '2 ~ 4颗', value: '3' },
        { label: '3 ~ 5颗', value: '4' },
        { label: '5颗以上', value: '5' },
      ],
      verifyTimeData: [
        { label: '<1年', value: '1' },
        { label: '1 ~ 5年', value: '2' },
        { label: '6 ~ 10年', value: '3' },
        { label: '>10年', value: '4' },
      ],
      helicobacterPyloriDetectionMethodData: [
        { label: '快速尿素酶试验', value: '1' },
        { label: '碳 13呼气试验', value: '2' },
        { label: '碳 14呼气试验', value: '3' },
        { label: '血清抗体试验', value: '4' },
        { label: '病理诊断', value: '5' },
        { label: '粪便抗原检测', value: '6' },
        { label: '不清楚', value: '7' },
      ],
      mealTimeData: [
        { label: '1 ~ 10分钟', value: '1' },
        { label: '11 ~ 20分钟', value: '2' },
        { label: '21 ~ 30分钟', value: '3' },
        { label: '30分钟以上', value: '4' },
      ],
      populationData: [
        { label: '1人', value: '1' },
        { label: '2 ~ 3人', value: '2' },
        { label: '4 ~ 5人', value: '3' },
        { label: '6 ~ 7人', value: '4' },
        { label: '8 ~ 9人', value: '5' },
        { label: '10人及以上', value: '6' },
      ],
      incomeData: [
        { label: '1万以下', value: '1' },
        { label: '1 ~ 4.9万', value: '2' },
        { label: '5 ~ 9.9万', value: '3' },
        { label: '10 ~ 19.9万', value: '4' },
        { label: '20万以上', value: '5' },
      ],
    };
  }

  render() {
    const { visible } = this.state;

    const columns = [
      {
        title: '亲属关系',
        dataIndex: 'domesticRelation',
        key: 'domesticRelation',
        render: (text, record, index) => (
          <div>
            <Radio.Group
              onChange={this.domesticRelationChange(index)}
              value={record.domesticRelation}
            >
              <Radio value="1">父母</Radio>
              <Radio value="2">兄弟姐妹</Radio>
              <Radio value="3">儿女</Radio>
            </Radio.Group>
          </div>
        ),
      },
      {
        title: '肿瘤名称',
        dataIndex: 'tumorName',
        key: 'tumorName',
        render: (text, record, index) => {
          const { tumorName } = record;
          const data = [
            { label: '肺癌', value: '1' },
            { label: '乳腺癌', value: '2' },
            { label: '结直肠癌', value: '3' },
            { label: '肝癌', value: '4' },
            { label: '胃癌', value: '5' },
            { label: '食管癌', value: '6' },
            { label: '子宫颈癌', value: '7' },
            { label: '甲状腺癌', value: '8' },
            { label: '前列腺癌', value: '9' },
            { label: '子宫体癌', value: '10' },
            { label: '口腔和咽喉肿瘤', value: '11' },
            { label: '鼻咽癌', value: '12' },
            { label: '肛门癌', value: '13' },
            { label: '胆囊癌', value: '14' },
            { label: '胰腺癌', value: '15' },
            { label: '喉癌', value: '16' },
            { label: '骨肿瘤', value: '17' },
            { label: '皮肤黑色素瘤', value: '18' },
            { label: '卵巢癌', value: '19' },
            { label: '睾丸癌', value: '20' },
            { label: '肾癌', value: '21' },
            { label: '膀胱癌', value: '22' },
            { label: '脑和中枢神经系统肿瘤', value: '23' },
            { label: '淋巴瘤', value: '24' },
            { label: '白血病', value: '25' },
            { label: '其他', value: '26' },
          ];
          const str = tumorName ? data.find(item => item.value == tumorName) : '';

          // return str.label;
          return (
            <Select defaultValue={tumorName} onChange={this.tumorNameChange(index)}>
              {data.map(item => (
                <Select.Option key={item.value}>{item.label}</Select.Option>
              ))}
            </Select>
          );
        },
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record, index) => (
          <div>
            <Button type="primary" onClick={this.addDomesticRelation}>
              添加
            </Button>
            <Button
              style={{ marginLeft: '10px' }}
              type="danger"
              onClick={this.delDomesticRelation(index)}
            >
              删除
            </Button>
          </div>
        ),
      },
    ];

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const { record } = this.props;
    const color = record.risk_report_id ? '#67c23a' : '#e6a23c';
    return (
      <div>
        <Button
          type="primary"
          style={{ marginLeft: '10px', background: color, borderColor: color }}
          onClick={this.showModal}
        >
          自测表
        </Button>
        <Modal
          title="自测表查看"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1500}
        >
          <Form {...formItemLayout}>
            <h3>基本信息</h3>
            <Divider />
            <Row>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    省份
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="省份"
                      value={this.state.form.provinceName}
                      onChange={this.provinceNameChange}
                      disabled
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    城市
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="城市"
                      value={this.state.form.cityName}
                      onChange={this.cityNameChange}
                      disabled
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    区县
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="区县"
                      value={this.state.form.districtName}
                      onChange={this.districtNameChange}
                      disabled
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    详细地址
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="详细地址"
                      value={this.state.form.address}
                      onChange={this.addressChange}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    姓名
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="姓名"
                      value={this.state.form.userName}
                      onChange={this.userNameChange}
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    性别
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Radio.Group onChange={this.sexChange} value={this.state.form.sex}>
                      <Radio value="1">男</Radio>
                      <Radio value="2">女</Radio>
                    </Radio.Group>
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    身份证
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="身份证"
                      onChange={this.idCardChange}
                      value={this.state.form.idCard}
                      style={{ width: '200px' }}
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    电话
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="电话"
                      onChange={this.phoneChange}
                      value={this.state.form.phone}
                      style={{ width: '200px' }}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    婚姻状况
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select
                      allowClear
                      value={this.state.form.maritalStatus}
                      onChange={this.maritalStatusChange}
                    >
                      {this.state.maritalStatusData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    教育程度
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select
                      allowClear
                      value={this.state.form.degreeEducation}
                      onChange={this.degreeEducationChange}
                    >
                      {this.state.degreeEducationData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    您家现在有几口人?（同户籍）
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select
                      allowClear
                      value={this.state.form.population}
                      onChange={this.populationChange}
                    >
                      {this.state.populationData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    您家庭平均年收入大约多少元
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select allowClear value={this.state.form.income} onChange={this.incomeChange}>
                      {this.state.incomeData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
            </Row>

            <Row>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    身高(cm)
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="身高"
                      value={this.state.form.height}
                      onChange={this.heightChange}
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    体重(Kg)
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Input
                      placeholder="体重"
                      value={this.state.form.weight}
                      onChange={this.weightChange}
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    收缩压
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select
                      allowClear
                      value={this.state.form.systolicPressure}
                      onChange={this.systolicPressureChange}
                    >
                      {this.state.systolicPressureData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
              <Col span={6}>
                <Row style={{ display: 'flex' }}>
                  <Col span={8} className={style.formLabel}>
                    舒张压
                  </Col>
                  <Col span={16} className={style.formText}>
                    <Select
                      allowClear
                      value={this.state.form.diastolicPressure}
                      onChange={this.diastolicPressureChange}
                    >
                      {this.state.diastolicPressureData.map(item => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Col>
                </Row>
              </Col>
            </Row>
            <Divider />
            <Tabs defaultActiveKey="1">
              <TabPane tab="上消化道肿瘤风险因素自测表" key="1">
                <h3 style={{ marginTop: '30px' }}>生活方式</h3>
                <Divider />

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        饮水主要来源
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Select
                          allowClear
                          value={this.state.form.headwaters}
                          onChange={this.headwatersChange}
                        >
                          {this.state.headwatersData.map(item => (
                            <Select.Option key={item.value}>{item.label}</Select.Option>
                          ))}
                        </Select>
                      </Col>
                    </Row>
                  </Col>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}></Col>
                      <Col span={18} className={style.formText}></Col>
                    </Row>
                  </Col>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}></Col>
                      <Col span={18} className={style.formText}></Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        吸烟
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group onChange={this.smokeChange} value={this.state.form.smoke}>
                          <Radio value="1">否</Radio>
                          <Radio value="2">是</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.smoke === '2' ? (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            吸烟频率(支/天)
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Input
                              placeholder="吸烟频率(支/天)"
                              onChange={this.smokingFrequencyChange}
                              value={this.state.form.smokingFrequency}
                            />
                          </Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            吸烟持续年数(年)
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Input
                              placeholder="吸烟持续年数(年)"
                              onChange={this.smokingYearChange}
                              value={this.state.form.smokingYear}
                            />
                          </Col>
                        </Row>
                      </Col>
                    </>
                  ) : (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        饮酒
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Select
                          allowClear
                          value={this.state.form.drink}
                          onChange={this.drinkChange}
                        >
                          {this.state.drinkData.map(item => (
                            <Select.Option key={item.value}>{item.label}</Select.Option>
                          ))}
                        </Select>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.drink === '3' ? (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            饮酒量
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.drinkQuantity}
                              onChange={this.drinkQuantityChange}
                            >
                              {this.state.drinkQuantityData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            饮酒频率(年)
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.drinkFrequency}
                              onChange={this.drinkFrequencyChange}
                            >
                              {this.state.drinkFrequencyData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                    </>
                  ) : (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        饮红茶
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          onChange={this.blackTeaChange}
                          value={this.state.form.blackTea}
                        >
                          <Radio value="1">不喝</Radio>
                          <Radio value="2">偶尔喝</Radio>
                          <Radio value="3">经常喝</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.blackTea == '3' ? (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            饮茶持续年数
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.blackTeaYear}
                              onChange={this.blackTeaYearChange}
                            >
                              {this.state.blackTeaYearData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  ) : (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        饮绿茶
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          onChange={this.greenTeaChange}
                          value={this.state.form.greenTea}
                        >
                          <Radio value="1">不喝</Radio>
                          <Radio value="2">偶尔喝</Radio>
                          <Radio value="3">经常喝</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.greenTea == '3' ? (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            饮茶持续年数
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.greenTeaYear}
                              onChange={this.greenTeaYearChange}
                            >
                              {this.state.greenTeaYearData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  ) : (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}></Col>
                          <Col span={18} className={style.formText}></Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <h3 style={{ marginTop: '30px' }}>下列食物您经常吃吗</h3>
                <Divider></Divider>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        新鲜蔬菜
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.vegetableChange}
                          value={this.state.form.vegetable}
                        />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        新鲜水果
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.fruitsChange}
                          value={this.state.form.fruits}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        肉蛋奶类
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.eggsMilkChange}
                          value={this.state.form.eggsMilk}
                        />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        豆类食品
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.BeanFoodChange}
                          value={this.state.form.BeanFood}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        腌晒食品
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.sunDryFoodChange}
                          value={this.state.form.sunDryFood}
                        />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        油炸食品
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.deepFryFoodChange}
                          value={this.state.form.deepFryFood}
                        />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        热烫食品
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.hotFoodChange}
                          value={this.state.form.hotFood}
                        />
                      </Col>
                    </Row>
                  </Col>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        霉变食品
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.foodData}
                          onChange={this.mildewFoodChange}
                          value={this.state.form.mildewFood}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={2} className={style.formLabel}>
                        您平时吃一顿饭的时间是多少分钟？
                      </Col>
                      <Col span={22} className={style.formText}>
                        <Radio.Group
                          options={this.state.mealTimeData}
                          onChange={this.mealTimeChange}
                          value={this.state.form.mealTime}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        有没有牙齿缺失
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.toothChange}
                          value={this.state.form.tooth}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.tooth === '2' && (
                    <>
                      <Col span={6}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            缺失几颗牙
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.loseTooth}
                              onChange={this.loseToothChange}
                            >
                              {this.state.loseToothData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={6}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            种植/镶几颗牙
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.plantTooth}
                              onChange={this.plantToothChange}
                            >
                              {this.state.plantToothData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <h3 style={{ marginTop: '30px' }}>消化系统疾病史</h3>
                <Divider></Divider>
                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={2} className={style.formLabel}>
                        是否做过胃镜
                      </Col>
                      <Col span={22} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.gastroscopeChange}
                          value={this.state.form.gastroscope}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        反流性食管炎
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.oesophagitisChange}
                          value={this.state.form.oesophagitis}
                        />
                      </Col>
                    </Row>
                  </Col>

                  <Col span={12}>
                    {this.state.form.oesophagitis === '2' && (
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.oesophagitisTime}
                            onChange={this.oesophagitisTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    )}
                  </Col>
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        贲门肠上皮化生
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.cardiaIntestinalMetaplasiaChange}
                          value={this.state.form.cardiaIntestinalMetaplasia}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.cardiaIntestinalMetaplasia === '2' && (
                    <>
                      <Col span={12}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={4} className={style.formLabel}>
                            疾病确诊后时间
                          </Col>
                          <Col span={20} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.cardiaIntestinalMetaplasiaTime}
                              onChange={this.cardiaIntestinalMetaplasiaTimeChange}
                            >
                              {this.state.verifyTimeData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        非萎缩性胃炎
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.nonAtrophicGastritisChange}
                          value={this.state.form.nonAtrophicGastritis}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.nonAtrophicGastritis === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.nonAtrophicGastritisTime}
                            onChange={this.nonAtrophicGastritisTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        萎缩性胃炎
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.atrophicGastritisChange}
                          value={this.state.form.atrophicGastritis}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.atrophicGastritis === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.atrophicGastritisTime}
                            onChange={this.atrophicGastritisTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        肠上皮化生
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.intestinalMetaplasiaChange}
                          value={this.state.form.intestinalMetaplasia}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.intestinalMetaplasia === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.intestinalMetaplasiaTime}
                            onChange={this.intestinalMetaplasiaTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        胃、十二指肠溃疡
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.gastricAndDuodenalUlcersChange}
                          value={this.state.form.gastricAndDuodenalUlcers}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.gastricAndDuodenalUlcers === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.gastricAndDuodenalUlcersTime}
                            onChange={this.gastricAndDuodenalUlcersTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        胃息肉
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.gastricPolypsChange}
                          value={this.state.form.gastricPolyps}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.gastricPolyps === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.gastricPolypsTime}
                            onChange={this.gastricPolypsTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}

                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        低级别上皮内瘤变
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.lowGradeIntraepithelialNeoplasiaChange}
                          value={this.state.form.lowGradeIntraepithelialNeoplasia}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.lowGradeIntraepithelialNeoplasia === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.lowGradeIntraepithelialNeoplasiaTime}
                            onChange={this.lowGradeIntraepithelialNeoplasiaTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        高级别瘤变与早癌
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.highGradeNeoplasiaAndEarlyCancerChange}
                          value={this.state.form.highGradeNeoplasiaAndEarlyCancer}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.highGradeNeoplasiaAndEarlyCancer === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.highGradeNeoplasiaAndEarlyCancerTime}
                            onChange={this.highGradeNeoplasiaAndEarlyCancerTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}

                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        Barrett食管（巴雷特食管）
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.barrettEsophagusChange}
                          value={this.state.form.barrettEsophagus}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.barrettEsophagus === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.barrettEsophagusTime}
                            onChange={this.barrettEsophagusTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        良性疾病胃大部切除史
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.historyOfBenignDiseaseSubtotalGastrectomyChange}
                          value={this.state.form.historyOfBenignDiseaseSubtotalGastrectomy}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.historyOfBenignDiseaseSubtotalGastrectomy === '2' && (
                    <>
                      <Col span={12}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={4} className={style.formLabel}>
                            疾病确诊后时间
                          </Col>
                          <Col span={20} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.historyOfBenignDiseaseSubtotalGastrectomyTime}
                              onChange={this.historyOfBenignDiseaseSubtotalGastrectomyTimeChange}
                            >
                              {this.state.verifyTimeData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                    </>
                  )}
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        胃癌胃大部切除史
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.historyOfSubtotalGastrectomyForGastricCancerChange}
                          value={this.state.form.historyOfSubtotalGastrectomyForGastricCancer}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.historyOfSubtotalGastrectomyForGastricCancer === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.historyOfSubtotalGastrectomyForGastricCancerTime}
                            onChange={this.historyOfSubtotalGastrectomyForGastricCancerTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        胃黏膜巨大皱褶征
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.gastricMucosaGiantFoldSignChange}
                          value={this.state.form.gastricMucosaGiantFoldSign}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.gastricMucosaGiantFoldSign === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.gastricMucosaGiantFoldSignTime}
                            onChange={this.gastricMucosaGiantFoldSignTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        幽门螺杆菌感染
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.helicobacterPyloriInfectionChange}
                          value={this.state.form.helicobacterPyloriInfection}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.helicobacterPyloriInfection === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.helicobacterPyloriInfectionTime}
                            onChange={this.helicobacterPyloriInfectionTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}

                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        幽门螺杆菌检测方法
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Select
                          allowClear
                          value={this.state.form.helicobacterPyloriDetectionMethod}
                          onChange={this.helicobacterPyloriDetectionMethodChange}
                        >
                          {this.state.helicobacterPyloriDetectionMethodData.map(item => (
                            <Select.Option key={item.value}>{item.label}</Select.Option>
                          ))}
                        </Select>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        肝炎
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.hepatitisChange}
                          value={this.state.form.hepatitis}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.hepatitis === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.hepatitisTime}
                            onChange={this.hepatitisTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        头颈部或呼吸道鳞癌
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractChange}
                          value={
                            this.state.form.squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTract
                          }
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTract === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={
                              this.state.form
                                .squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractTime
                            }
                            onChange={
                              this.squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractTimeChange
                            }
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={4} className={style.formLabel}>
                        恶性贫血
                      </Col>
                      <Col span={20} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.perniciousAnemiaChange}
                          value={this.state.form.perniciousAnemia}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.perniciousAnemia === '2' && (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={4} className={style.formLabel}>
                          疾病确诊后时间
                        </Col>
                        <Col span={20} className={style.formText}>
                          <Select
                            allowClear
                            value={this.state.form.perniciousAnemiaTime}
                            onChange={this.perniciousAnemiaTimeChange}
                          >
                            {this.state.verifyTimeData.map(item => (
                              <Select.Option key={item.value}>{item.label}</Select.Option>
                            ))}
                          </Select>
                        </Col>
                      </Row>
                    </Col>
                  )}
                </Row>

                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        其它
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.elseChange}
                          value={this.state.form.else}
                        />
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.else === '2' && (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            疾病名称
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Input
                              placeholder="疾病名称"
                              value={this.state.form.diseasName}
                              onChange={this.diseasNameChange}
                            />
                          </Col>
                        </Row>
                      </Col>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={6} className={style.formLabel}>
                            疾病确诊后时间
                          </Col>
                          <Col span={18} className={style.formText}>
                            <Select
                              allowClear
                              value={this.state.form.elseTime}
                              onChange={this.elseTimeChange}
                            >
                              {this.state.verifyTimeData.map(item => (
                                <Select.Option key={item.value}>{item.label}</Select.Option>
                              ))}
                            </Select>
                          </Col>
                        </Row>
                      </Col>
                    </>
                  )}
                </Row>

                <h3 style={{ marginTop: '30px' }}>肿瘤家族史</h3>
                <Divider />
                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={2} className={style.formLabel}>
                        你家中有没有人得过肿瘤
                      </Col>
                      <Col span={22} className={style.formText}>
                        <Radio.Group
                          options={this.state.whether}
                          onChange={this.firstDegreeRelativeHadTumorChange}
                          value={this.state.form.firstDegreeRelativeHadTumor}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>
                {this.state.form.firstDegreeRelativeHadTumor === '2' && (
                  <>
                    <Table columns={columns} dataSource={this.state.familialHistory} rowKey="id" />
                  </>
                )}
              </TabPane>

              <TabPane tab="结直肠癌风险因素自测表" key="2">
                <h3 style={{ marginTop: '30px' }}>结直肠疾病史</h3>
                <Divider />
                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        是否曾接受过结肠镜检查
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.isCheck}
                          onChange={e => this.radioChangeHandle(e, 'isCheck')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.isCheck == 1 ? (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={6} className={style.formLabel}>
                          最后一次结肠镜检查的年份
                        </Col>
                        <Col span={18} className={style.formText}>
                          <DatePicker
                            mode="year"
                            onPanelChange={(value, mode, filed) => {
                              this.handleDatePickerChange(value, mode, 'lastCheckYear');
                            }}
                            value={this.state.form.lastCheckYear}
                            format="YYYY"
                          />
                        </Col>
                      </Row>
                    </Col>
                  ) : (
                    ''
                  )}
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否曾诊断结直肠息肉
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          onChange={e => this.radioChangeHandle(e, 'isColorectalPolyps')}
                          value={this.state.form.isColorectalPolyps}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={12}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={6} className={style.formLabel}>
                        您是否曾诊断炎性肠病
                      </Col>
                      <Col span={18} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.isIBD}
                          onChange={e => this.radioChangeHandle(e, 'isIBD')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.isIBD == 1 ? (
                    <Col span={12}>
                      <Row style={{ display: 'flex' }}>
                        <Col span={6} className={style.formLabel}>
                          诊断IBD距今时间
                        </Col>
                        <Col span={18} className={style.formText}>
                          <InputNumber
                            v-model="hasIBDYear"
                            onChange={e => {
                              this.inputNumberChangeHandle(e, 'hasIBDYear');
                            }}
                            min={0}
                          ></InputNumber>
                          <span style={{ margin: '0px 5px' }}>年</span>
                          <InputNumber
                            min={0}
                            v-model="hasIBDMouth"
                            onChange={e => {
                              this.inputNumberChangeHandle(e, 'hasIBDMouth');
                            }}
                          ></InputNumber>
                          <span style={{ margin: '0px 5px' }}>月</span>
                        </Col>
                      </Row>
                    </Col>
                  ) : (
                    ''
                  )}
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您本人是否为结直肠患者
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.isColorectalPatients}
                          onChange={e => this.radioChangeHandle(e, 'isColorectalPatients')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您本人是否诊断有其他恶性肿瘤
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasOtherMalignancy}
                          onChange={e => this.radioChangeHandle(e, 'hasOtherMalignancy')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <h3 style={{ marginTop: '30px' }}>结直肠家族史</h3>
                <Divider />
                <Row>
                  <Col span={8}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={9} className={style.formLabel}>
                        您的一级亲属中，是否有人患结直肠癌
                      </Col>
                      <Col span={15} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.relativesHasColorectalPatients}
                          onChange={e =>
                            this.radioChangeHandle(e, 'relativesHasColorectalPatients')
                          }
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                  {this.state.form.relativesHasColorectalPatients == 1 ? (
                    <>
                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={9} className={style.formLabel}>
                            一级亲属中诊断肠癌的共有几人
                          </Col>
                          <Col span={15} className={style.formText}>
                            <InputNumber
                              min={0}
                              value={this.state.form.relativesHasColorectalPatientsNum}
                              onChange={e => {
                                this.inputNumberChangeHandle(
                                  e,
                                  'relativesHasColorectalPatientsNum'
                                );
                              }}
                            />
                          </Col>
                        </Row>
                      </Col>

                      <Col span={8}>
                        <Row style={{ display: 'flex' }}>
                          <Col span={9} className={style.formLabel}>
                            诊断肠癌的一级亲属中，诊断时最小的是几岁
                          </Col>
                          <Col span={15} className={style.formText}>
                            <InputNumber
                              min={0}
                              value={this.state.form.relativesHasColorectalPatientsMinAge}
                              onChange={e => {
                                this.inputNumberChangeHandle(
                                  e,
                                  'relativesHasColorectalPatientsMinAge'
                                );
                              }}
                            />
                          </Col>
                        </Row>
                      </Col>
                    </>
                  ) : (
                    ''
                  )}
                </Row>
                <h3 style={{ marginTop: '30px' }}>其他风险因素</h3>
                <Divider />
                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有慢性便秘
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasCC}
                          onChange={e => this.radioChangeHandle(e, 'hasCC')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有慢性腹泻
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasCDD}
                          onChange={e => this.radioChangeHandle(e, 'hasCDD')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有粘液血便
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.mucousBloodyStool}
                          onChange={e => this.radioChangeHandle(e, 'mucousBloodyStool')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有慢性阑尾炎
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasChronicAppendicitis}
                          onChange={e => this.radioChangeHandle(e, 'hasChronicAppendicitis')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有慢性胆囊炎
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasChronicCholecystitis}
                          onChange={e => this.radioChangeHandle(e, 'hasChronicCholecystitis')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <Row style={{ display: 'flex' }}>
                      <Col span={3} className={style.formLabel}>
                        您是否有长期遭受精神伤害
                      </Col>
                      <Col span={21} className={style.formText}>
                        <Radio.Group
                          value={this.state.form.hasDivineDamage}
                          onChange={e => this.radioChangeHandle(e, 'hasDivineDamage')}
                        >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                          <Radio value="3">不清楚</Radio>
                        </Radio.Group>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>
          </Form>
        </Modal>
      </div>
    );
  }

  handleDatePickerChange = (value, mode, filed) => {
    const { form } = this.state;
    form[filed] = value;
    console.log(typeof form[filed], form[filed]);

    this.setState({
      form,
    });
  };

  provinceNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        provinceName: value,
      },
    }));
  };

  cityNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        cityName: value,
      },
    }));
  };

  districtNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        districtName: value,
      },
    }));
  };

  addressChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        address: value,
      },
    }));
  };

  userNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        userName: value,
      },
    }));
  };

  sexChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        sex: value,
      },
    }));
  };

  idCardChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        idCard: value,
      },
    }));
  };
  phoneChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        phone: value,
      },
    }));
  };
  maritalStatusChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        maritalStatus: value,
      },
    }));
  };
  headwatersChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        headwaters: value,
      },
    }));
  };
  degreeEducationChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        degreeEducation: value,
      },
    }));
  };
  populationChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        population: value,
      },
    }));
  };
  incomeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        income: value,
      },
    }));
  };
  heightChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        height: value,
      },
    }));
  };
  weightChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        weight: value,
      },
    }));
  };
  systolicPressureChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        systolicPressure: value,
      },
    }));
  };
  mealTimeChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        mealTime: value,
      },
    }));
  };
  diastolicPressureChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        diastolicPressure: value,
      },
    }));
  };
  smokeChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        smoke: value,
      },
    }));
  };
  smokingFrequencyChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        smokingFrequency: value,
      },
    }));
  };
  smokingYearChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        smokingYear: value,
      },
    }));
  };
  drinkChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        drink: value,
      },
    }));
  };
  drinkQuantityChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        drinkQuantity: value,
      },
    }));
  };
  drinkFrequencyChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        drinkFrequency: value,
      },
    }));
  };
  blackTeaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        blackTea: value,
      },
    }));
  };
  greenTeaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        greenTea: value,
      },
    }));
  };
  blackTeaYearChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        blackTeaYear: value,
      },
    }));
  };
  greenTeaYearChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        greenTeaYear: value,
      },
    }));
  };
  vegetableChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        vegetable: value,
      },
    }));
  };
  fruitsChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        fruits: value,
      },
    }));
  };
  eggsMilkChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        eggsMilk: value,
      },
    }));
  };
  BeanFoodChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        BeanFood: value,
      },
    }));
  };
  sunDryFoodChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        sunDryFood: value,
      },
    }));
  };
  deepFryFoodChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        deepFryFood: value,
      },
    }));
  };
  hotFoodChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        hotFood: value,
      },
    }));
  };
  mildewFoodChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        mildewFood: value,
      },
    }));
  };
  toothChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        tooth: value,
      },
    }));
  };

  loseToothChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        loseTooth: value,
      },
    }));
  };
  plantToothChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        plantTooth: value,
      },
    }));
  };
  gastroscopeChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        gastroscope: value,
      },
    }));
  };
  oesophagitisChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        oesophagitis: value,
      },
    }));
  };
  cardiaIntestinalMetaplasiaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        cardiaIntestinalMetaplasia: value,
      },
    }));
  };
  nonAtrophicGastritisChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        nonAtrophicGastritis: value,
      },
    }));
  };
  atrophicGastritisChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        atrophicGastritis: value,
      },
    }));
  };
  intestinalMetaplasiaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        intestinalMetaplasia: value,
      },
    }));
  };
  gastricAndDuodenalUlcersChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        gastricAndDuodenalUlcers: value,
      },
    }));
  };
  gastricPolypsChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        gastricPolyps: value,
      },
    }));
  };
  lowGradeIntraepithelialNeoplasiaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        lowGradeIntraepithelialNeoplasia: value,
      },
    }));
  };
  highGradeNeoplasiaAndEarlyCancerChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        highGradeNeoplasiaAndEarlyCancer: value,
      },
    }));
  };
  historyOfBenignDiseaseSubtotalGastrectomyChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        historyOfBenignDiseaseSubtotalGastrectomy: value,
      },
    }));
  };

  historyOfBenignDiseaseSubtotalGastrectomyTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        historyOfBenignDiseaseSubtotalGastrectomyTime: value,
      },
    }));
  };

  historyOfSubtotalGastrectomyForGastricCancerChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        historyOfSubtotalGastrectomyForGastricCancer: value,
      },
    }));
  };
  historyOfSubtotalGastrectomyForGastricCancerTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        historyOfSubtotalGastrectomyForGastricCancerTime: value,
      },
    }));
  };
  barrettEsophagusChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        barrettEsophagus: value,
      },
    }));
  };

  gastricMucosaGiantFoldSignChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        gastricMucosaGiantFoldSign: value,
      },
    }));
  };
  helicobacterPyloriInfectionChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        helicobacterPyloriInfection: value,
      },
    }));
  };

  helicobacterPyloriDetectionMethodChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        helicobacterPyloriDetectionMethod: value,
      },
    }));
  };

  hepatitisChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        hepatitis: value,
      },
    }));
  };

  squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTract: value,
      },
    }));
  };
  perniciousAnemiaChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        perniciousAnemia: value,
      },
    }));
  };
  elseChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        else: value,
      },
    }));
  };
  diseasNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        diseasName: value,
      },
    }));
  };
  firstDegreeRelativeHadTumorChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        firstDegreeRelativeHadTumor: value,
      },
    }));
  };
  // domesticRelationChange = e => {
  //   const value = e.target.value;
  //   this.setState(params => ({
  //     form: {
  //       ...params.form,
  //       domesticRelation: value,
  //     },
  //   }));
  // };
  oesophagitisTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        oesophagitisTime: value,
      },
    }));
  };
  cardiaIntestinalMetaplasiaTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        cardiaIntestinalMetaplasiaTime: value,
      },
    }));
  };
  nonAtrophicGastritisTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        nonAtrophicGastritisTime: value,
      },
    }));
  };
  atrophicGastritisTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        atrophicGastritisTime: value,
      },
    }));
  };
  intestinalMetaplasiaTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        intestinalMetaplasiaTime: value,
      },
    }));
  };
  gastricAndDuodenalUlcersTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        gastricAndDuodenalUlcersTime: value,
      },
    }));
  };
  gastricPolypsTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        gastricPolypsTime: value,
      },
    }));
  };
  lowGradeIntraepithelialNeoplasiaTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        lowGradeIntraepithelialNeoplasiaTime: value,
      },
    }));
  };
  highGradeNeoplasiaAndEarlyCancerTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        highGradeNeoplasiaAndEarlyCancerTime: value,
      },
    }));
  };
  barrettEsophagusTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        barrettEsophagusTime: value,
      },
    }));
  };
  gastricMucosaGiantFoldSignTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        gastricMucosaGiantFoldSignTime: value,
      },
    }));
  };
  helicobacterPyloriInfectionTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        helicobacterPyloriInfectionTime: value,
      },
    }));
  };
  hepatitisTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        hepatitisTime: value,
      },
    }));
  };
  squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        squamousCellCarcinomaOfTheHeadNeckOrRespiratoryTractTime: value,
      },
    }));
  };
  perniciousAnemiaTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        perniciousAnemiaTime: value,
      },
    }));
  };
  elseTimeChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        elseTime: value,
      },
    }));
  };

  showModal = () => {
    /**详情*/
    this.execHttp('crowdDataReport/findById', {
      id: this.props.record.id,
    }).then(resp => {
      if (resp && resp.success) {
        if (resp.data.response.riskReportId) {
          this.setState({
            visible: true,
          });
          this.getDataByPage(resp.data.response.riskReportId);
        } else {
          this.setState({
            visible: true,
            form: {
              provinceName: this.props.record.province_name,
              cityName: this.props.record.city_name,
              districtName: this.props.record.district_name,
              address: this.props.record.addr,
              userName: this.props.record.name,
              phone: this.props.record.phone,
              idCard: this.props.record.sfz,
            },
          });
        }
      }
    });
  };

  radioChangeHandle = (e, filed) => {
    const { form } = this.state;
    form[filed] = e.target.value;
    if (filed == 'isCheck' && e.target.value == 1) {
      form.lastCheckYear = '';
    } else if (filed == 'isCheck' && e.target.value == 1) {
      form.hasIBDTime = '';
    } else if (filed == 'relativesHasColorectalPatients' && e.target.value == 1) {
      form.relativesHasColorectalPatientsNum = '';
      form.relativesHasColorectalPatientsMinAge = '';
    }

    this.setState({
      form,
    });

    // return (e, filed) => {
    //   console.log(e, filed);
    // }
  };

  inputNumberChangeHandle = (e, filed) => {
    //     hasIBDYear
    // hasIBDMouth
    const { form } = this.state;
    let hasIBDYear = this.state.form.hasIBDYear;
    let hasIBDMouth = this.state.form.hasIBDMouth;
    if (filed == 'hasIBDYear' || filed == 'hasIBDMouth') {
      if (filed == 'hasIBDYear') {
        hasIBDYear = e;
      } else if (filed == 'hasIBDMouth') {
        hasIBDMouth = e;
      }
      form.hasIBDTime = hasIBDYear + '年' + hasIBDMouth + '月';
      this.setState({
        hasIBDYear,
        hasIBDMouth,
        form,
      });
    } else {
      form[filed] = e;
      this.setState({
        form,
      });
    }
  };

  handleOk = () => {
    this.setState({
      visible: true,
    });
    //
    // const content = {
    //   user: this.props.currentUser.id,
    //   id: this.props.record.id,
    //   orgId: this.props.record.org_id,
    //   content: this.state.familialHistory,
    //   ...this.state.form
    // }
    const { content } = this.state;
    const { colorectalCancerContent } = this.state;
    const form = this.state.form;
    let data = {
      content: { ...content },
      colorectalCancerContent: { ...colorectalCancerContent },
    };
    content.user = this.props.currentUser.id;
    content.id = this.props.record.id;
    content.orgId = this.props.record.org_id;
    content.content = this.state.familialHistory;
    for (const key in content) {
      data.content[key] = form[key];
    }
    for (const key in colorectalCancerContent) {
      data.colorectalCancerContent[key] = form[key];
    }

    console.log(JSON.stringify(data.content), JSON.stringify(data.colorectalCancerContent));

    request('/api/cdcerservice/v1/riskfactor/edit', {
      method: 'POST',
      requestType: 'form',
      data: {
        user: this.props.currentUser.id,
        id: this.props.record.id,
        orgId: this.props.record.org_id,
        userName: content.userName,
        idCard: content.idCard,
        content: JSON.stringify(data.content),
        colorectalCancerContent: JSON.stringify(data.colorectalCancerContent),
      },
    }).then(() => {
      notification.open({
        message: '上报成功',
      });
      this.setState({
        visible: false,
      });
      this.props.getDataByPage({});
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  tumorNameChange = index => {
    return e => {
      const { familialHistory } = this.state;
      familialHistory[index].tumorName = e;
      this.setState({
        familialHistory,
      });
    };
  };
  domesticRelationChange = index => {
    return e => {
      const { familialHistory } = this.state;
      const value = e.target.value;
      familialHistory[index].domesticRelation = value;
      this.setState({
        familialHistory,
      });
    };
  };
  // 添加亲属关系
  addDomesticRelation = () => {
    const { familialHistory } = this.state;

    familialHistory.push([]);

    this.setState({
      familialHistory,
    });
  };

  delDomesticRelation = index => {
    return () => {
      const { familialHistory } = this.state;
      familialHistory.splice(index, 1);
      this.setState({
        familialHistory,
      });
    };
  };

  //查看详情
  getDataByPage = id => {
    this.execHttp('qrCode/viewDetails', {
      id,
    }).then(resp => {
      if (resp.success) {
        const content = JSON.parse(resp.data.content);
        const colorectalCancerContent = JSON.parse(resp.data.colorectalCancerContent);
        const data = {
          ...content,
          ...colorectalCancerContent,
        };

        const lastCheckYear = data.lastCheckYear;
        console.log('data', data.lastCheckYear);
        if (data.hasIBDTime) {
          let temArr1 = data.hasIBDTime.split('月');
          let temArr2 = temArr1[0].split('年');
          const hasIBDYear = temArr2[0];
          const hasIBDMonth = temArr2[1];

          this.setState({
            hasIBDYear,
            hasIBDMonth,
          });
        }
        if (data.lastCheckYear) {
          data.lastCheckYear = moment(data.lastCheckYear);
        }
        const { familialHistory } = this.state;
        this.setState({
          form: data,
          content,
          colorectalCancerContent,
          familialHistory: data ? data.content : familialHistory,
        });
      }
    });
  };
}
